<template>
  <div v-if="localInfo">
    <div class="div-pop" catchtouchmove="true">
      <div class="get-user-info">
        <div class="top-nav" :style="'height: '+ spaceBarHeight + 'px; padding-top: '+ statusBarTop + 'px;'">
          <div class="flex-center v-align-c">
            <label class="top-txt">授权</label>
          </div>
        </div>
        <div class="align-c pad-l-30 pad-r-30 mar-l-15 mar-r-15">
          <img class="width-222 height-159 pic-bar" v-if="fileSpace" mode="widthFix"
                 :src="fileSpace + '/images/local-auth-bg2.png'"/>
          <div class="font-16 align-c mar-t-30 pad-t-30">
            <p>未获取到陛下的位置信息</p>
            <p>请先授权</p>
          </div>
          <div class="width-per-100">
            <button
              size="default"
              class="primary-button font-18"
              :style="{color:appInfo.style.color5, background:appInfo.style.color2}"
              @click="localAgain">朕允了</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getLocation, updateMemberLocation } from '@/api/common'
  import { setLocal } from '@/utils/auth'

  export default {
    data() {
      return {
        isComponents: true,
        userInfo: {},
        localInfo: false,
        spaceBarHeight: 0,
        statusBarTop: 0,
        appInfo: {},
        failNum: 0,
        listQuery: {
          memberId: '',
          keyword: '',
          lng: '',
          lat: '',
          currentPage: 1,
          size: 10
        }
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44 + 36
      this.statusBarTop = this.statusBarHeight - 36
      this.appInfo = this.$pt.getStorageSync('appInfo')
    },
    onShow() {
      if (this.$pt.getStorageSync('localTag')) return
      this.$pt.setStorageSync('localTag', true)
      this.localGet()
    },
    mounted() {
      if (this.$pt.getStorageSync('localTag')) return
      this.$pt.setStorageSync('localTag', true)
      this.localGet()
    },
    methods: {
      localAgain() {
        let that = this
        this.$pt.showModal({
          content: '需要访问你的位置',
          success(res) {
            if (res.confirm) {
              that.$pt.openSetting()
            } else if (res.cancel) {}
          }
        })
      },
      updateMemberLocation(memberId, local) {
        updateMemberLocation({
          memberId: memberId,
          latitude: local.latitude,
          longitude: local.longitude
        }).then((response) => {
          this.$parent.updateLocalEls()
          // this.$emit('updateLocal')
          // this.$pt.navigateTo({ url: '/pages/home/change-site/main' })
        }).catch(() => {
        })
      },
      localGet() {
        let that = this
        if (that.$pt.getStorageSync('sureChangeSite') || Object.keys(that.$pt.getStorageSync('local')).length) return
        that.$pt.setStorageSync('failNum', that.failNum)
        that.$pt.getLocation({
          type: 'gcj02',
          success(res) {
            that.$pt.removeStorageSync('localTag')
            if (res.latitude && res.longitude) {
              const latitude = res.latitude
              const longitude = res.longitude
              let local = {}
              local.latitude = latitude
              local.longitude = longitude
              setLocal(local)
              getLocation({
                latitude: latitude,
                longitude: longitude
              }).then((response) => {
                if (response.isError) return
                local.address = response.data.address
                setLocal(local)
                // 更新微客地理位置信息
                if (that.getCustomerId) {
                  that.updateMemberLocation(that.getCustomerId, local)
                } else {
                  that.$parent.initPageInfo()
                  // this.$emit('updateLocal')
                  // that.$pt.navigateTo({ url: '/pages/home/change-site/main' })
                }
              }).catch(() => {
              })
            }
          },
          fail(res) {
            let failCount = that.$pt.getStorageSync('failNum')
            failCount++
            that.$pt.setStorageSync('failNum', failCount)
            console.log('取消11', that.$pt.getStorageSync('failNum'), res)
            if (that.$pt.getStorageSync('failNum') > 1) {
              that.$pt.showModal({
                content: '需要访问你的位置',
                success(res) {
                  if (res.confirm) {
                    that.$pt.openSetting()
                    console.log('需要访问res confirm', that.localInfo)
                  } else if (res.cancel) {
                    // that.localInfo = true
                    console.log('需要访问res cancel', that.localInfo)
                  }
                }
              })
            }
            // that.$pt.showModal({
            //   content: '需要访问你的位置',
            //   success(res) {
            //     if (res.confirm) {
            //       that.$pt.openSetting()
            //     } else if (res.cancel) {}
            //   }
            // })
          }
        })
      }
    }
  }
</script>


<style scoped lang="less">
  .div-pop{
    z-index: 1200;
  }  
  .get-user-info {
    width: 375px;
    height: calc(100vh);
    background-color: #fff;
    overflow: hidden;
    .pic-bar{
      margin-top: 119px;
      border-radius: 100px;
    }
    .title-1{
      color: #292929;
    }
    .steps{
      text-align: center;
      color: #818181;
    }
    .primary-button{
      background: linear-gradient(to right, #ff9700, #ff4800);
      box-shadow: 0 4px 9px rgba(225, 93, 31, 0.3);
      color: #fff;
      border-radius: 50px;
      margin-top: 35px;
      padding: 1px 0;
    }
    .top-nav{
      background: #ffffff;
      color: #333;
      height: 100px;
      padding-top: 29px;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      .top-txt{
        font-size: 18px;
        color: #333;
      }
    }
  }
</style>
